import Base from "../base.js"

import schedulesApi from "../../api/schedules"
import theatersApi from "../../api/theaters"
import MoviesApi from '../../api/movies.js'
import indentApi from "../../api/indent.js"
import seatsApi from "../../api/seats.js";
import schedules from "../../api/schedules";
import usersApi from "../../api/users.js"
import _ from "lodash"
export default class extends Base {
    constructor(prop) {
        super(prop);
     

    }
    data = {
        seatsgId:'',
        status:false,
        seatingId: [],
        scheduleId: '',
        seatsId: '',
        theaterId: '',
        seating: [],
        curpage: 1,
        eachpage: 10,
        rows: []
    }
    seatsId='';
    seatsArr = []
    render() {
        this.$el.html(`
        <h1 style="margin-left:50px">新增订单</h1>
        <form class="layui-form" action="">
        <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <select name="usersNameId" class="users"></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电影</label>
                <div class="layui-input-inline">
                    <select name="movieId" class="movies"></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电影院</label>
                <div class="layui-input-inline">
                    <select name="cinemasId" class="cinemas"></select>
                </div>
            </div>
                <div class="layui-form-item">
                <label class="layui-form-label">放映厅</label>
                <jkhhi21div class="layui-input-inline">
                    <select name="theatersId" class="theaters"></select>
                </div>
            </div>
            <div>
                <div class="layui-form-item">
                    <label class="layui-form-label">放映时间</label>
                    <div class="layui-input-inline">
                        <select name="showTimeId" class="showTime"></select>
                    </div>
                </div>
            </div>
        
            <div class="layui-form-item">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-inline">
                    <select name="schedulesId" class="price"></select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确定</button>
                    <button class="layui-btn" lay-submit lay-filter="demo1">取消</button>
                </div>
            </div>
        </form>
        <div class="set-seats">
        <div class="seats-info"></div>
                <div class="seats-box"></div>
            </div>
        
        `)
        this.formEle = layui.form;

        this.userNameEle = $(".users")
        this.moviesEle = $(".movies")
        this.cinemasEle = $(".cinemas")
        this.theatersEle = $(".theaters")
        this.showTimeEle = $(".showTime")
        this.priceEle = $(".price")
        this.seatsEle = $(".seats")
        this.seatingsEle = $('.seats-box')

    }
    async rerender() {
       
        //用户
        const userName = await indentApi.uses()
        this.userNameEle.html(`${ _.map(userName, item => {
          
        return `<option  value="${item._id}">${item.userName}</option>`
    })}`)

        // 电影
        const {
            curpage,
            eachpage
        } = this.data
        const movies = await MoviesApi.getMov({
            curpage,
            eachpage
        })
        let moviesEleRows = movies.rows
        let moviesOP = _.map(moviesEleRows, item => {

            return `<option  value="${item._id}">${item.cname}</option>`
        })
        this.moviesEle.html(moviesOP)
        // 放映厅
        this.data.theaters = await indentApi.load()
        let theatersOp = _.map(this.data.theaters, item => {
            this.data.theaterId = item._id
            return `<option  value="${item._id}">${item.name}</option>`
        })
        this.theatersEle.html(theatersOp)
        //电影
        this.data.cinemas = await indentApi.cinemas({
            curpage,
            eachpage
        })

        let cinemasOp = _.map(this.data.cinemas.rows, item => {
            return `<option  value="${item._id}">${item.name}</option>`
        })
        this.cinemasEle.html(cinemasOp)
        //座位id
        const theaterId = this.data.theaterId
        const seatsI = await seatsApi.searchSeats({
            theaterId
        });

        this.seatingsEle.html(`
    ${
        _.map(seatsI,(item,index)=>{
            this.data.seatsId=item._id
         
            return  `
            <span _id="${item._id}" row="${item.row}" col="${item.col}" class='seats'></span>
            ${(~~index + 1) % 9 == 0 ? `<br/>` : ''}
            
            `   
        }).join("")
    }
`)

        //    价格
        this.data.schedules = await indentApi.getSc()
        const priveOp = _.map(this.data.schedules, item => {
            this.data.scheduleId = item._id
            return `<option  value="${item._id}">${item.price}</option>`
        })
        //放映时间
        const showTimeOp = _.map(this.data.schedules, item => {
            return `<option  value="${item._id}">${item.date} ${item.showTime}</option>`
        })
        this.priceEle.html(priveOp)
        this.showTimeEle.html(showTimeOp)


        this.formEle.render()
    }

    
    async seatIng() {
   
      
        let that = this
      const  seats= await indentApi.checkSe()
 const a =_.map(seats,item=>
  item._id
    )
  for (let i = 0; i < a.length-1; i++) {
    console.log( a.splice(i,1)[0]);
    this.data.seatsgId=a.splice(i,1)[0]
  }
  
  
  
        $(document).on("click", ".seats", function () {
       
          
            $(this).toggleClass("choose");
           
            if ($(this).hasClass("choose")) {
               console.log("输出");
                that.seatsArr.push({
                    _id: $(this).attr("_id"),
                    row: $(this).attr("row"),
                    col: $(this).attr("col")
                })
            } else {
                for (let i = that.seatsArr.length - 1; i > -1; i--) {
                    that.seatsArr[i]._id == $(this).attr("_id") ? that.seatsArr.splice(i, 1) : ""
                }
            }
            const seating = _.map(that.seatsArr, (item,i) => {
                that.data.seatingId = item._id
          
                return `${item.row}排${item.col}号`
            })
            that.data.seating = seating
     
       

        })
        
      

    }
    mounted() {

        this.seatIng()
        this.rerender()
    }
    async addIndent(data) {

        await indentApi.addIndent(data);

        const {
            seatsId,
            scheduleId,
            seatingId,
            seating,
            status
        } = this.data

        await indentApi.creatSting({
            seatsId,
            scheduleId,
            seating,
            status
        })
    await indentApi.getSeating({
            seatingId
        })

    }
    handle() {

        this.formEle.on('submit(formDemo)', (data) => {
            layer.msg('新增成功', {
                icon: 1,
                time: 1500, //2秒关闭（如果不配置，默认是3秒）
            })
         
          data.field.seatingId= this.data.seatingId
        
          data.field.seatsId=  this.data.seatsgId
   console.log(data.field);
            this.addIndent(data.field)

            return false;
        });
        this.formEle.on('submit(demo1)', (data) => {
            return false;
        });
        this.formEle.on('submit(get)', (data) => {
           
            indentApi.getIndentOne(data.field).then(res => {
                this.data.rows = res;
              
                this.rerender();
            })
            return false;
        });

    }
}